<template>
	<div>
	<el-drawer title="我的消息" :visible.sync="drawer" direction="rtl"  :show-close="true"
		:wrapperClosable="false" :destroy-on-close="true" class="drawer-main" size="600px" :show="show" @close="click" append-to-body>
      <div class="close" @click="click">
      	<i class="el-icon-close"></i>
      </div>

	  <div class="message-body">
		  <div class="message-header">
			  <el-scrollbar style="height: 100%;">
			  	<div style="margin: 10px;">
					<div>
						<el-card class="box-card" shadow="hover" v-for="(item,index) in mesData" :key="index">
						  <div slot="header" class="clearfix">
							  <img src="../assets/img/empty-face.png" width="50" height="50" class="send-face" />
						    <span >admin</span>
							<el-tag size="mini">{{item.creat_time}}</el-tag>

						    <el-button style="float: right; padding: 3px 0" type="text">标记已读</el-button>
							<el-button style="float: right; padding: 3px 0" type="text">删除</el-button>
						  </div>
						  <div  class="box-body">
						   {{item.context}}
						  </div>
						</el-card>
					</div>
				</div>
			</el-scrollbar>
		  </div>

		  <div class="message-footer">

			  <el-pagination
			      layout="prev, pager, next"
			      :total="total"
				  style="flex: 1;"
				  >
			    </el-pagination>
				<el-button type="primary" style="margin-right: 10px;">全部已读</el-button>
		  </div>
	  </div>


   </el-drawer>
	</div>
</template>

<script>
	let _self;
	import {getMesList} from '@/api/tool/notice'
	export default{
		data(){
			return{
				drawer: false,
				pageSize: 10, //一页显示多少条
				pageNumber: 1, //当前多少页
				total: 0, //总页数
				mesData:[],
			}
		},
		props: {

			show: {
				type: Boolean,
				default: false
			},

		},
		watch: {
			show() {
				this.drawer = this.show;

			}
		},
		created() {
			_self = this;
			_self.init();


		},
		methods:{
			click() {
				console.log("我执行了没有");
				this.$emit('update', this.show)

			},
			init(){
				let param = {
					"pageSize": _self.pageSize,
					"pageNumber": _self.pageNumber,

				}
				getMesList(param).then((res) => {
					_self.mesData = res.data.list;
					_self.total = res.data.total;
				})
			}
		}
	}
</script>

<style lang="scss">
	.message-body{
		width: 100%;

		height: 100%;
		.message-header{
			height: calc(100% - 50px);

			width: 100%;
			.el-scrollbar__wrap{
				overflow-x: hidden !important;
			}
			.box-card{
				border: 0;
				background-color: #f9f9f9;
				margin-bottom: 10px;
				.el-card__header{
					padding: 10px 20px;
					border: 0;
					span{
						line-height: 30px;
						margin-left: 10px;
						font-size: 14px;
					}
					.el-tag{
						font-size: 12px !important;
						height: 25px;

						    line-height: 25px;
					}
				}
				.send-face{
					border-radius: 15px;
					width: 30px;
					height: 30px;
					float: left;
					margin-bottom: 10px;
				}
				.box-body{
					background-color: #f1f1f1;
					border-radius: 10px;
					padding: 10px 30px;
					font-size: 14px;

				}
				.el-card__body{
					padding: 10px;
				}
			}

		}
		.message-footer{
			height: 50px;
			display: flex;
			align-items: center;
		}
	}


</style>
